<template>
  <d2-container>
    <template slot="header">
      <div style="display: flex;width: 100%">
        <div class="search" style="display: flex;justify-content: space-around;width: 65%;">
          <div class="search_box" style="display: flex;justify-content: space-around;width: 100%">
            <div style="width: 20%">
              <el-input v-model="bill.bill_id" placeholder="请输入账单ID" ></el-input>
            </div>
            <div style="width: 20%">
              <el-input v-model="bill.uid" placeholder="请输入用户Id"></el-input>
            </div>
          </div>
          <div class="search_button" style="width: 20%">
            <el-button type="primary" style="width: 100%" @click="search_info">点击查询</el-button>
          </div>
          <div>
            <el-button type="primary" style="margin-left: 20px" @click="addBill">点击添加数据</el-button>
          </div>
          <div>
            <el-button type="primary" style="margin-left: 20px" @click="Refresh">点击刷新页面</el-button>
          </div>
        </div>
      </div>
    </template>

    <template>
      <el-table
              :data="tableData"
              style="min-width: 100%">
        <el-table-column
                prop="bill_id"
                label="账单Id"
                align="center">
        </el-table-column>
        <el-table-column
                prop="uid"
                label="用户Id"
                align="center">
        </el-table-column>
        <el-table-column
                prop="last_water"
                label="上月水费"
                align="center">
        </el-table-column>
        <el-table-column
                prop="last_lightning"
                label="上月电费"
                align="center">
        </el-table-column>
        <el-table-column
                prop="last_wy"
                label="上月物业费"
                align="center">
        </el-table-column>
        <el-table-column
                prop="pay"
                label="租金"
                align="center">
        </el-table-column>
        <el-table-column
                prop="last_month"
                label="上月账单金额"
                align="center">
        </el-table-column>
        <el-table-column
                prop="last_state"
                label="是否缴清"
                align="center">
          <template slot-scope = "scope">
            {{ scope.row.last_state == 1 ? '已缴清':'未缴清' }}
          </template>
        </el-table-column>
        <el-table-column
                prop="create_time"
                label="创建时间"
                align="center">
          <template slot-scope = "scope">
            {{ new Date(parseInt(scope.row.create_time)) | moment('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column
                prop="address"
                label="操作"
                width="150px"
                align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editBill(scope.row.bill_id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template slot="footer">
      <template>
        <div class="block">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div>
      </template>

    </template>

    <!--添加账单-->
    <el-dialog
            title="添加账单"
            :visible.sync="addBillDialog"
            align="center">
      <el-form ref="form" :model="addbill" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="用户Id">
                <el-input v-model="addbill.uid"></el-input>
              </el-form-item>
              <el-form-item label="上月水费">
                <el-input v-model="addbill.last_water"></el-input>
              </el-form-item>
              <el-form-item label="上月电费">
                <el-input v-model="addbill.last_lightning"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上月物业费" label-width="100px">
              <el-input v-model="addbill.last_wy"></el-input>
            </el-form-item>
            <el-form-item label="上月账单" label-width="100px">
              <el-input v-model="addbill.last_month"></el-input>
            </el-form-item>
            <el-form-item label="租金" label-width="100px">
              <el-input v-model="addbill.pay"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否缴清" label-width="100px">
              <el-radio-group v-model="addbill.last_state">
                <el-radio :label="1">已缴清</el-radio>
                <el-radio :label="0">未缴清</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="confirmAdd">确认添加</el-button>
              <el-button @click="addBillDialog = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!--修改账单数据-->
    <el-dialog
            title="添加账单"
            :visible.sync="editBillDialog"
            align="center">
      <el-form ref="form" :model="editbill" label-width="70px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="用户Id">
                <el-input v-model="editbill.uid"></el-input>
              </el-form-item>
              <el-form-item label="上月水费">
                <el-input v-model="editbill.last_water"></el-input>
              </el-form-item>
              <el-form-item label="上月电费">
                <el-input v-model="editbill.last_lightning"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上月物业费" label-width="100px">
              <el-input v-model="editbill.last_wy"></el-input>
            </el-form-item>
            <el-form-item label="上月账单" label-width="100px">
              <el-input v-model="editbill.last_month"></el-input>
            </el-form-item>
            <el-form-item label="是否缴清" label-width="100px">
              <el-radio-group v-model="editbill.last_state">
                <el-radio :label="1">已缴清</el-radio>
                <el-radio :label="0">未缴清</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="confirmBill">确认修改</el-button>
              <el-button @click="editBillDialog = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </d2-container>
</template>

<script>
  export default {
    name: "billManagement",
    data() {
      return {
        tableData: [],
        editBillId: '',
        addBillDialog: false,
        editBillDialog: false,
        currentPage: 1,
        limit: 30,
        total: 50,
        bill: {
          bill_id: '',
          uid: '',
          last_water: '',
          last_lightning: '',
          last_wy: '',
          last_month: '',
          last_state: '',
        },
        addbill: {
          uid: '',
          last_water: '',
          last_lightning: '',
          last_wy: '',
          last_month: '',
          last_state: '',
          pay: '',
        },
        editbill: {
          uid: '',
          last_water: '',
          last_lightning: '',
          last_wy: '',
          last_month: '',
          last_state: '',
          pay: ''
        }
      }
    },
    async created() {
      this.getList();
    },
    methods: {
      Refresh() {
        window.location.reload();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      async getList() {
        try {
          const res = await this.$api.post('/bill/billList', { limit: this.limit, page: this.currentPage });
          console.log(res);
          this.total = res.data.data.count;
          this.tableData = res.data.data.rows;
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async search_info() {
        try {
          let not_null = [];
          for (let v in this.bill) {
            if (this.bill[v] !== '') {
              not_null.push(v);
            }
          }
          if (not_null.length > 0) {
            const res = await this.$api.post('/bill/billList', {
              bill_id: this.bill.bill_id,
              uid: this.bill.uid,
              limit:this.limit,
              page:this.currentPage
            });
            if(res.data.state == 1){
              for(let v in this.bill) {
                this.bill[v] = '';
              }
              this.$message({ message: '查询成功！', type: 'success' });
              this.tableData = res.data.data.rows;
            }else {
              this.$message.error('查询失败！');
              this.getList();
            }
          } else {
            this.$message.error('请至少输入一个字段进行查询！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      addBill() {
        // 清空表单
        for(let v in this.addbill) {
          this.addbill[v] = '';
        }
        //显示弹窗
        this.addBillDialog = true;
      },
      async confirmAdd() {
        try {
          let is_null = [];
          for (let v in this.addbill) {
            if (this.addbill[v] === '') {
              is_null.push(v);
            }
          }
          if (is_null.length === 0) {
            const res = await this.$api.post('/bill/addBill', this.addbill);
            if (res.data.state == 1) {
              this.$message({ message: '添加成功！', type: 'success' });
              this.addBillDialog = false;
              this.getList();
            } else {
              this.$message.error('添加失败！');
              this.getList();
            }
          } else {
            this.$message.error('不能有数据为空！')
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async editBill(bill_id) {
        try {
          this.editBillId = bill_id;
          const res  = await this.$api.post('/bill/getbillbyId', { bill_id });
          console.log(res);
          if (res.data.state == 1) {
            const {
              uid,
              last_water,
              last_lightning,
              last_wy,
              last_month,
              last_state,
              pay
            } = res.data.data;
            this.editbill = {
              uid,
              last_water,
              last_lightning,
              last_wy,
              last_month,
              last_state,
              pay
            };
            this.editBillDialog = true;
          } else {
            this.$message.error('获取当前数据失败！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      },
      async confirmBill() {
        try {
          let is_null = [];
          for (let v in this.editbill) {
            if (this.editbill[v] === '' ) {
              is_null.push(v);
            }
          }
          if (is_null.length === 0) {
            this.editbill.bill_id = this.editBillId;
            const res =  await this.$api.post('/bill/updataBill', this.editbill);
            if (res.data.state == 1) {
              this.editBillDialog = false;
              this.$message({ message: '修改成功！', type: 'success' });
              this.getList();
            }else {
              this.editBillDialog = false;
              this.$message.error('修改失败！')
            }
          } else {
            this.$message.error('不能有数据为空！');
          }
        } catch (e) {
          console.log(e);
          this.$message.error('服务器异常，获取数据失败！');
        }
      }
    }
  }
</script>

<style scoped>

</style>
